import React from 'react';
import {MapInformation2Icon, Calendar1Icon, AccessibilityIcon, Filter3Icon, CompassIcon, GestureSlideLeftAndRightIcon} from 'tdesign-icons-react';

const PageContainer = ({ children }) => (
  <div style={{ maxWidth: '1120px', margin: '0 auto', padding: '24px' }}>{children}</div>
);

const HeroSection = () => (
  <section style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: '16px', padding: '32px 16px' }}>
    <div style={{ maxWidth: '780px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
      <h1 style={{ color: 'var(--text)', fontSize: 'clamp(32px, 6vw, 64px)', fontWeight: 900, letterSpacing: '-0.033em', lineHeight: 1.1 }}>智能规划行程，旅行从未如此简单</h1>
      <p style={{ color: 'var(--muted)', fontSize: 'clamp(16px, 2.5vw, 18px)', lineHeight: 1.6 }}>输入您的旅行想法，NexusGo 将在数秒内为您生成个性化行程。告别繁琐规划，拥抱轻松旅途。</p>
    </div>
  </section>
);

const InputField = ({ label, placeholder, icon }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', width: '100%' }}>
    <label style={{ fontSize: '14px', fontWeight: 600, color: 'var(--text)' }}>{label}</label>
    <div style={{ position: 'relative' }}>
      <div style={{ position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)', color: 'var(--muted)' }}>{icon}</div>
      <input
        type="text"
        placeholder={placeholder}
        style={{
          width: '100%',
          height: '48px',
          borderRadius: '12px',
          border: '1px solid var(--border)',
          background: 'var(--card)',
          color: 'var(--text)',
          padding: '0 16px 0 40px',
          outline: 'none',
          boxSizing: 'border-box'
        }}
        autoComplete="off"
      />
    </div>
  </div>
);

const PlannerBlock = () => {
  const gridRef = React.useRef(null);
  const [isNarrow, setIsNarrow] = React.useState(false);
  React.useEffect(() => {
    const measure = () => {
      if (gridRef.current) {
        setIsNarrow(gridRef.current.offsetWidth <= 820);
      }
    };
    measure();
    window.addEventListener('resize', measure);
    return () => window.removeEventListener('resize', measure);
  }, []);

  return (
    <section style={{ padding: '0 16px' }}>
      <div style={{ background: 'var(--card)', border: '1px solid var(--border)', borderRadius: '12px', boxShadow: '0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03)', padding: '16px' }}>
        <div
          ref={gridRef}
          style={{
            display: 'grid',
            gridTemplateColumns: isNarrow ? '1fr' : 'minmax(280px, 2fr) minmax(180px, 1fr) minmax(180px, 1fr) 160px',
            gap: '20px',
            alignItems: 'end'
          }}
        >
          <div style={{ minWidth: 0}}>
            <InputField label="目的地" placeholder="例如：南京" icon={<MapInformation2Icon size="25px" fillColor='transparent' strokeColor='currentColor' strokeWidth={1.5} />} />
          </div>
          <div style={{ minWidth: 0 }}>
            <InputField label="旅行天数" placeholder="例如：5天" icon={<Calendar1Icon size="25px" fillColor='transparent' strokeColor='currentColor' strokeWidth={1.5} />} />
          </div>
          <div style={{ minWidth: 0 }}>
            <InputField label="旅行风格" placeholder="休闲、探险..." icon={<AccessibilityIcon size="25px" fillColor='transparent' strokeColor='currentColor' strokeWidth={1.5}/>} />
          </div>
          <button
            style={{
              width: isNarrow ? '100%' : '160px',
              height: '48px',
              borderRadius: '12px',
              background: 'var(--text)',
              color: 'var(--bg)',
              fontSize: '16px',
              fontWeight: 700,
              border: '1px solid var(--text)'
            }}
          >
            快速规划
          </button>
        </div>
      </div>
    </section>
  );
}

const FeatureCard = ({ icon, title, desc }) => (
  <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', background: 'var(--card)', border: '1px solid var(--border)', borderRadius: '12px', padding: '24px' }}>
    <div style={{ width: '48px', height: '48px', borderRadius: '12px', background: 'rgba(0,0,0,0.06)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text)' }}>{icon}</div>
    <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
      <h3 style={{ color: 'var(--text)', fontSize: '18px', fontWeight: 700, lineHeight: 1.3 }}>{title}</h3>
      <p style={{ color: 'var(--muted)', fontSize: '14px', lineHeight: 1.6 }}>{desc}</p>
    </div>
  </div>
);

const FeaturesSection = () => (
  <section style={{ display: 'flex', flexDirection: 'column', gap: '16px', padding: '0 16px' }}>
    <div style={{ maxWidth: '640px' }}>
      <h2 style={{ color: 'var(--text)', fontSize: 'clamp(28px, 4vw, 32px)', fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1.2 }}>核心功能一览</h2>
      <p style={{ color: 'var(--muted)', fontSize: '16px', marginTop: '8px' }}>探索 NexusGo 如何让您的旅行规划变得前所未有的简单与智能。</p>
    </div>
    <div style={{ display: 'grid', gap: '16px', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))' }}>
      <FeatureCard icon={<Filter3Icon size="30px" fillColor='transparent' strokeColor='currentColor' strokeWidth={1.5}/>} title="个性化行程" desc="根据您的兴趣、预算和时间，AI为您量身定制独一无二的旅行计划。" />
      <FeatureCard icon={<CompassIcon size="30px" fillColor='transparent' strokeColor='currentColor' strokeWidth={1.5}/>} title="智能路线优化" desc="自动规划每日最佳游览路线，节省交通时间，让您玩得更尽兴。" />
      <FeatureCard icon={<GestureSlideLeftAndRightIcon size="30px" fillColor='transparent' strokeColor='currentColor' strokeWidth={1.5}/>} title="灵活编辑调整" desc="随时轻松添加、删除或调整行程中的任何活动，打造完美旅程。" />
    </div>
  </section>
);

const DestinationCard = ({ title, tag, image }) => (
  <div style={{ position: 'relative', borderRadius: '12px', overflow: 'hidden', aspectRatio: '3 / 4', display: 'flex', alignItems: 'flex-end', padding: '16px', backgroundPosition: 'center', backgroundSize: 'cover', backgroundImage: `linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 60%), url(${image})` }}>
    <div style={{ position: 'absolute', inset: 0, background: 'rgba(0,0,0,0.1)' }} />
    <div style={{ position: 'relative', zIndex: 1 }}>
      <p style={{ color: 'var(--text)', fontSize: '18px', fontWeight: 700, lineHeight: 1.3 }}>{title}</p>
      <span style={{ display: 'inline-block', marginTop: '8px', fontSize: '12px', fontWeight: 700, textTransform: 'uppercase', padding: '4px 8px', borderRadius: '9999px', background: 'var(--bg)', color: 'var(--text)' }}>{tag}</span>
    </div>
  </div>
);

const DestinationsSection = () => (
  <section style={{ display: 'flex', flexDirection: 'column', gap: '12px', padding: '0 16px' }}>
    <h2 style={{ color: 'var(--text)', fontSize: 'clamp(24px, 3vw, 28px)', fontWeight: 800, letterSpacing: '-0.015em', lineHeight: 1.2 }}>热门目的地推荐</h2>
    <div style={{ display: 'grid', gap: '12px', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))' }}>
      <DestinationCard title="京都" tag="文化" image="https://lh3.googleusercontent.com/aida-public/AB6AXuBjBG90BEsaqGfoVKiE3-b5qhcENzJDl9L72fxSvEfzM_1f2jTXTYXRvUVRtMPyPb4bLt_X53xrNEs5GyEV48FtbsLcOuZtMWmP40QjDzt70_YcJbWs9kLpbiAYhfH9tNyAYivhCnrZWO--ZM_FO43vHfgmEBDaah1Wq7clYOn2F4tdUamXtnngZ4ZR4OWUaBQ-B6vDnzM5G6cnNIkbtYnxNC1l0s-2SYKQO7rM40eoHRePr28clWrKpJ1tWwtCJXt-uGrdxTWTeQ" />
      <DestinationCard title="瑞士阿尔卑斯" tag="探险" image="https://lh3.googleusercontent.com/aida-public/AB6AXuBHzmjjcG42qxwNUDVicsJC5NS_r_suU_IXx9IxONg6ro2c98r8liHG0ylt2xR38oo5qo74YVrcBhOOOYft7zmYAy83kSfab0zQPz4m0XzGybwbG2ikEEAsIs8ojUYm0eu3QitPoecwNc-AZ5-k1xyVy04VO2oWxDbf-qVn9qazvydjKcsYj0m3hFHt1eMFICztekdVPvkTV6jmK1bzlVHnhDUU17R1pNuvnbAMMRN1NcNimg-MSoaqJmqp35nyHjVffgsc36CSMg" />
      <DestinationCard title="巴厘岛" tag="休闲" image="https://lh3.googleusercontent.com/aida-public/AB6AXuDs0-Mnd3Svlc9FTYhe3k94Yd1yVn3lefsgmIQIBDXV6ZJ_-Qm_6RfbR-cZ5xWdjdbo1vHwQDKFJLieUGAY5aRzdFKKBC-C3YF1qYjUewcVRjnaWDoS8toTQ3h8Uty1ol850e0Fp_N9Ix3M6p37WrS31ufoZmCS1vVXS56v7MtS9wdak2OaGtKQAxvvQvMOx1rF24Aj8jgMcXggP3SRLoFCcxHQDAEcGbaXLgThOV6DS6-v-8uv8UNTmcWB3scK9ksk9ZuzFlhsSw" />
      <DestinationCard title="罗马" tag="历史" image="https://lh3.googleusercontent.com/aida-public/AB6AXuCSbfWKf6FecSi_DwkE_-6xHgsBSpMsi57_PGrHaLE8hpzFwFLdXqwjELtZe0bV8PlRcJqCHycqhfnABV6FcZgtSzMdEBXcf9oTkWLNYwiFe9LGvXvgdLgFVimCHU30_nPanX9143X5Sqt3iioaa2rqWq9Zb-ldI96WIi18QlcevS6JKRqeHYdBY5t1ia5VhLKcSrsyr1JySbaf5g396_7dRkYc2tzDsDm3I8TrH1TMTDz_aCPBiGN6-QCvWfJtTodTgyLZtRjK9g" />
    </div>
  </section>
);

const FooterSection = () => (
  <footer style={{ marginTop: '32px', borderTop: '1px solid var(--border)', paddingTop: '24px', paddingBottom: '16px' }}>
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '16px', flexWrap: 'wrap' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', color: 'var(--muted)' }}>
        <p style={{ fontSize: '14px' }}>© 2025 NexusGo. 保留所有权利。</p>
      </div>
      <div style={{ display: 'flex', gap: '16px' }}>
        <a href="#" style={{ fontSize: '14px', color: 'var(--muted)', textDecoration: 'none' }}>服务条款</a>
        <a href="#" style={{ fontSize: '14px', color: 'var(--muted)', textDecoration: 'none' }}>隐私政策</a>
        <a href="#" style={{ fontSize: '14px', color: 'var(--muted)', textDecoration: 'none' }}>联系我们</a>
      </div>
    </div>
  </footer>
);

const Home = () => (
  <PageContainer>
    <HeroSection />
    <PlannerBlock />
    <FeaturesSection />
    <DestinationsSection />
    <FooterSection />
  </PageContainer>
);

export default Home;
